//文档加载完成后执行其中的代码
$(function () {
});

function openImg(fileItem) {
    const fileModal = new bootstrap.Modal($('#imgModal'));
    // 将参数存储在一个数据属性中
    $('#imgModal').data('fileItem', fileItem);
    const canvas = document.getElementById('myCanvas');
    $('#imgModal').data('canvas', canvas);
    fileModal.show();
}


//显示选择的图片
function showOpenImg(imgSrc) {
    $("#openseadragon1").html("")
    const viewer = OpenSeadragon({
        id: 'openseadragon1', // 装载到的容器
        prefixUrl: "lib/openseadragon-3.1.0/images/", // 工具所需用到图表样式路径
        //showNavigator: true,  // 是否显示导航缩略图
        showNavigator:  false,
        // navigatorPosition:   "BOTTOM_LEFT",
        navigatorPosition:   "BOTTOM_RIGHT",
        // minZoomLevel:   0.1,
        maxZoomLevel:   10,
        defaultZoomLevel:   0,
        tileSources:   [{
            type: 'image',
            url:  imgSrc,
        }]
    });
    //
    console.log(viewer)
}


//显示选择的图片
function showImg(imgSrc) {
    const img = document.createElement('img');
    img.id="zoomImage"
    img.src = imgSrc;  // 直接使用URL加载图片
    img.classList.add('img-fluid');
    const fileContentElement = document.getElementById('imgContent');;
    fileContentElement.innerHTML = ''; // 清空内容
    fileContentElement.appendChild(img);
}

//图集 当 show 实例方法被调用之后，此事件被立即触发。
$(function () {
    $('#imgModal').on('show.bs.modal', function (event) {
        // 从数据属性中获取参数
        const fileItem = $('#imgModal').data('fileItem');
        const imgSrc = fileItem.fileUrl;

//        showImg(imgSrc)
         showOpenImg(imgSrc)
        //drawCanvas()
    })
});


//当隐藏时触发
$(function () {
    $('#imgModal').on('hide.bs.modal', function () {
        //$('#imgContent').innerHTML = ''; // 清空内容
        $('#imgModal').data('fileItem', null);
    })
});


